<template>
  <div class="details-wrap">
    <!-- 客户信息 -->
    <div class="customer-info">
      <!-- header -->
      <div class="title">
        <div class="fl">
          <span></span>
          <span></span>
        </div>
        <p>客户信息</p>
      </div>
      <div class="content">
        <van-field
          v-model="carInfo.carNum"
          label-align="right"
          input-align="right"
          disabled
          clearable
          placeholder
          @click="carPlateClick"
          class="card-cell"
        >
          <template slot="label">
            <span class="fl">号牌号码</span>
            <van-button size="mini" icon="play" color="#ea4d18" type="primary" class="fr card">
              <span class="fl">{{carPlateText}}</span>
            </van-button>
          </template>
        </van-field>
        <van-field
          v-model="carInfo.username"
          label="客户姓名"
          input-align="right"
          placeholder="请输入您的姓名"
          maxlength="10"
        />

        <van-field
          v-model="carInfo.mobile"
          type="tel"
          input-align="right"
          placeholder="请输入您的手机号"
          label="手机号码"
        />

        <van-field
          v-model="carInfo.code"
          label-align="right"
          input-align="right"
          type="number"
          clearable
          placeholder="请输入您的验证码"
          class="card-cell-validation"
          maxlength="4"
        >
          <span class="fl" slot="label">验证码</span>

          <van-button
            slot="label"
            size="small"
            color="#ea4d18"
            type="primary"
            class="validation"
            @click="sendVerifyCode"
          >
            <Countdown ref="Countdown" class="times"></Countdown>
          </van-button>
        </van-field>
      </div>
    </div>

    <!-- 行驶证信息 -->
    <div class="drivers-license bg-fff">
      <!-- header -->
      <div class="title">
        <div class="fl">
          <span></span>
          <span></span>
        </div>
        <p>行驶证信息</p>
      </div>
      <UpFile @afterRead="afterRead($event,'front')">
        <div class="uploader">
          <div class="box">
            <div class="icon">
              <div class="bg" v-show="carInfo.carImgFront === ''"></div>
            </div>
            <div class="bottom" v-if="carInfo.carImgFront === ''">
              <span>拍照上传行驶证主页</span>
              <span>上传后自动识别内容</span>
            </div>
            <div class="text bg-fff" v-else>
              <img :src="carInfo.carImgFront" class="img-contain" />
            </div>
          </div>
        </div>
      </UpFile>
      <UpFile @afterRead="afterRead($event,'back')">
        <div class="uploader">
          <div class="box">
            <div class="icon">
              <div class="bg" v-show="carInfo.carImgBack === ''"></div>
            </div>
            <div class="bottom" v-if="carInfo.carImgBack === ''">
              <span>拍照上传行驶证副页</span>
              <span>上传后自动识别内容</span>
            </div>
            <div class="text bg-fff" v-else>
              <img :src="carInfo.carImgBack" class="img-contain" />
            </div>
          </div>
        </div>
      </UpFile>
    </div>

    <!-- 车辆信息 -->
    <div class="customer-info bg-fff">
      <!-- header -->
      <div class="title">
        <div class="fl">
          <span></span>
          <span></span>
        </div>
        <p>车辆信息</p>
      </div>
      <div class="content">
        <div class="special color">
          <p class="t-name">车身颜色</p>
          <van-radio-group v-model="carInfo.carColor" direction="horizontal">
            <van-radio
              shape="square"
              checked-color="#ea4d18"
              icon-size="16px"
              :name="val.value"
              v-for="val in carColorArr"
              :key="val.name"
            >{{ val.name }}</van-radio>
          </van-radio-group>
        </div>
        <div class="special drive-form">
          <p class="t-name">驱动形式</p>
          <van-radio-group v-model="carInfo.carDriveType" direction="horizontal">
            <van-radio
              shape="square"
              checked-color="#ea4d18"
              icon-size="16px"
              :name="val.value"
              v-for="val in carDriverArr"
              :key="val.name"
            >{{ val.name }}</van-radio>
          </van-radio-group>
        </div>
        <div class="special drive-form">
          <p class="t-name">变速箱类型</p>
          <van-radio-group v-model="carInfo.carAtType" direction="horizontal">
            <van-radio
              shape="square"
              checked-color="#ea4d18"
              icon-size="16px"
              :name="val.value"
              v-for="val in carAtTypeArr"
              :key="val.name"
            >{{ val.name }}</van-radio>
          </van-radio-group>
        </div>
        <div class="special fuel">
          <p class="t-name">燃油类型</p>
          <van-radio-group v-model="carInfo.carFuel" direction="horizontal">
            <van-radio
              shape="square"
              checked-color="#ea4d18"
              icon-size="16px"
              :name="val.value"
              v-for="val in carFuelArr"
              :key="val.name"
            >{{ val.name }}</van-radio>
          </van-radio-group>
        </div>
        <van-field
          v-model="carInfo.carType"
          readonly
          label="车辆类型"
          input-align="right"
          placeholder="上传行驶证后自动识别"
          maxlength="10"
          class="items"
        />
        <van-field
          v-model="carInfo.carIdNum"
          readonly
          label="车辆识别代号"
          input-align="right"
          placeholder="上传行驶证后自动识别"
          maxlength="10"
          class="items"
        />
        <van-field
          v-model="carInfo.mileage"
          label="行驶里程"
          input-align="right"
          placeholder="请输入行驶里程"
          maxlength="6"
          class="items"
        />
        <van-field
          v-model="carInfo.carOut"
          @click="carOutShow = true"
          readonly
          label="汽车排量"
          input-align="right"
          placeholder="请选择汽车排量"
          maxlength="4"
          class="items"
        />
      </div>
    </div>

    <!-- 上传电子签名 -->
    <div class="signature-info bg-fff">
      <!-- header -->
      <div class="title">
        <div class="fl">
          <span></span>
          <span></span>
        </div>
        <p>上传电子签名</p>
      </div>
      <div class="content">
        <div class="uploader">
          <div class="bg bg-fff">
            <img src="../../assets/img/icon/upload.png" />
          </div>
          <div class="text" @click="signatureClick" v-if="!carInfo.carAttachment1">
            <p>点击上传</p>
            <p>请上传您本人签名</p>
          </div>
          <div class="text bg-fff" v-else @click="signatureClick">
            <img :src="carInfo.carAttachment1" class="img-contain" />
          </div>
        </div>
      </div>
    </div>

    <!-- 备用项 -->
    <div class="standby-info bg-fff">
      <!-- header -->
      <div class="title">
        <div class="fl">
          <span></span>
          <span></span>
        </div>
        <p>
          <span>备用项（车主无需操作上传）</span>
          <van-icon :name="boxshow ? 'arrow-up' : 'arrow-down'" @click="boxshow =!boxshow" />
        </p>
      </div>
      <transition name="box">
        <div class="content clearfix" v-show="boxshow">
          <div class="fl">
            <UpFile @afterRead="afterRead($event,'carAttachment2')">
              <div class="uploader">
                <div class="box" v-if="!carInfo.carAttachment2">
                  <span>+</span>
                </div>
                <div class="box bg-fff" v-else>
                  <img :src="carInfo.carAttachment2" class="img-contain" />
                </div>
                <p>上传车辆铭牌照片</p>
              </div>
            </UpFile>
          </div>
          <div class="fr">
            <UpFile @afterRead="afterRead($event,'carAttachment3')">
              <div class="uploader">
                <div class="box" v-if="!carInfo.carAttachment3">
                  <span>+</span>
                </div>
                <div class="box bg-fff" v-else>
                  <img :src="carInfo.carAttachment3" class="img-contain" />
                </div>
                <p>上传车辆车身照片</p>
              </div>
            </UpFile>
          </div>
        </div>
      </transition>
    </div>

    <!-- 服务协议 -->
    <div class="agreement-info">
      <van-checkbox v-model="agreementChecked" shape="square" checked-color="#ea4d18" class="fl">
        <span>我已阅读并同意</span>
      </van-checkbox>
      <!-- <span class="color fl" @click="vehicleDetailsShow = true">《服务协议》</span> -->
      <span class="color fl" @click="vehicleClick">《服务协议》</span>
    </div>

    <van-button type="primary" color="#ea4d18" class="btn-submit" block @click="addCars">提交</van-button>

    <!-- 手写板 -->
    <div id="canvasBox" :style="getHorizontalStyle" v-show="signatureShow">
      <drawingBoard
        ref="esign"
        :isCrop="drawingInfo.isCrop"
        :lineWidth="drawingInfo.lineWidth"
        :lineColor="drawingInfo.lineColor"
        :bgColor.sync="drawingInfo.bgColor"
      ></drawingBoard>
      <!-- <canvas></canvas>
      <div class="botton-box">
        <van-icon name="cross" size="30" class="fl" @click="signatureShow = false" />
        <van-icon name="delete" size="30" @click="clear" />
        <van-icon name="success" size="30" class="fr" @click="signatureUp" />
      </div>-->
      <div class="botton-box">
        <van-icon name="cross" size="30" class="fl" @click="signatureShow = false" />
        <van-icon name="delete" size="30" @click="handleReset" />
        <van-icon name="success" size="30" class="fr" @click="handleGenerate" />
      </div>
    </div>

    <!-- 服务协议 -->
    <!-- <van-overlay :show="vehicleDetailsShow">
      <div class="wrapper" @click.stop>
        <agreement @agreedClick="vehicleDetailsShow = false"></agreement>
      </div>
    </van-overlay>-->

    <!-- 弹出框 选择排量 -->
    <van-popup v-model="carOutShow" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        title="标题"
        :columns="carOutaArr"
        @cancel="carOutShow = false"
        @confirm="onConfirm"
      />
    </van-popup>

    <!-- 车辆号牌弹出 -->
    <van-action-sheet v-model="carPlateDialog">
      <vehicleKeyboard @complete="complete"></vehicleKeyboard>
    </van-action-sheet>
  </div>
</template>

<script>
import agreement from './agreement'
import Draw from '@/utils/draw'
import UpFile from '@/components/upFile/index'
import drawingBoard from '@/components/drawingBoard/index'
import Countdown from '@/components/countdown/index'
import vehicleKeyboard from '@/components/vehicleKeyboard/index.vue'
import { getLocal } from '@/utils/storage'
export default {
  name: 'vehicleDetails',
  data() {
    return {
      editState: false,
      carInfo: {
        userId: null,
        carNum: null, // 车牌号
        carDriveNum: null, // 发动机号码
        carPeople: null, // 所有人
        carIdNum: null, // 车辆识别代号
        carType: null, // 车辆类型
        carSize: null, // 外廓尺寸
        carFuel: null, // 燃油类型
        carImgFront: null, // 行驶证正面
        carImgBack: null, // 行驶证反面
        carAtType: null, // 变速箱类型 !
        carDriveType: null, // 驱动形式
        carColor: null, // 车身颜色
        carOut: null, // 排量
        carAttachment1: null, // 备用项1
        carAttachment2: null, // 备用项2
        carAttachment3: null // 备用项3
      },
      carInfoDisabled: {
        carNum: false
      },
      drawingInfo: {
        lineWidth: 6,
        lineColor: '#000000',
        bgColor: '',
        resultImg: '',
        isCrop: true
      },
      carPlateText: '冀',
      // 车排量
      carColorArr: [],
      carDriverArr: [],
      carFuelArr: [],
      carAtTypeArr: [],
      carOutShow: false,
      carOutaArr: [],

      agreementChecked: false,
      carPlateDialog: false,
      boxshow: false,
      // 签名弹出
      signatureShow: false,
      // 签名图片
      signatureImg: '',
      // 服务协议
      vehicleDetailsShow: false
    }
  },
  computed: {
    getHorizontalStyle() {
      const d = document
      const w =
        window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth
      const h =
        window.innerHeight ||
        d.documentElement.clientHeight ||
        d.body.clientHeight
      let length = (h - w) / 2
      let width = w
      let height = h

      switch (this.degree) {
        case -90:
          length = -length
        // eslint-disable-next-line no-fallthrough
        case 90:
          width = h
          height = w
          break
        default:
          length = 0
      }
      if (this.canvasBox) {
        this.canvasBox.removeChild(document.querySelector('canvas'))
        this.canvasBox.appendChild(document.createElement('canvas'))
        // eslint-disable-next-line vue/no-async-in-computed-properties
        setTimeout(() => {
          this.initCanvas()
        }, 200)
      }
      return {
        transform: `rotate(${this.degree}deg) translate(${length}px,${length}px)`,
        width: `${width}px`,
        height: `${height}px`,
        transformOrigin: 'center center'
      }
    }
  },
  created() {
    console.log(this.$route, '----  编辑状态进入 车辆详情 --------')
    console.log(JSON.parse(getLocal('userInfo')), 'carUser')

    if (this.$route.params.edit || this.$route.params.name === 'agreement') {
      if (this.$route.params.name === 'agreement') {
        this.editState = this.$route.params.editState
      } else {
        this.editState = true
      }

      let info = this.$route.params.carInfo
      this.carInfo = {
        username: info.username,
        mobile: info.mobile,
        id: info.id,
        userId: info.userId,
        carNum: info.carNum, // 车牌号
        carDriveNum: info.carDriveNum, // 发动机号码
        carPeople: info.carPeople, // 所有人
        carIdNum: info.carIdNum, // 车辆识别代号
        carType: info.carType, // 车辆类型
        carSize: info.carSize, // 外廓尺寸
        carFuel: info.carFuel, // 燃油类型
        carImgFront: info.carImgFront, // 行驶证正面
        carImgBack: info.carImgBack, // 行驶证反面
        carAtType: info.carAtType, // 变速箱类型 !
        carDriveType: info.carDriveType, // 驱动形式
        carColor: info.carColor, // 车身颜色
        carOut: info.carOut, // 排量
        mileage: info.mileage, // 里程
        carAttachment1: info.carAttachment1, // 备用项1
        carAttachment2: info.carAttachment2, // 备用项2
        carAttachment3: info.carAttachment3 // 备用项3
      }
    }
    this.dataDir({
      type: 'carColorType'
    })
    this.dataDir({
      type: 'carDriverType'
    })
    this.dataDir({
      type: 'carFuelType'
    })
    this.dataDir({
      type: 'carAtType'
    })
    this.dataDir({
      type: 'carOutType'
    })
  },
  methods: {
    // 添加车辆信息  提交
    async addCars() {
      console.log(
        this.carInfo,
        this.agreementChecked,
        '------------- this.carInfo-----------'
      )
      let res = null
      if (this.validationFn()) {
        return
      } else {
        if (this.editState) {
          res = await this.$api.updateCars(this.carInfo)
          console.log(res, '------------------- 修改车辆信息 ----------------')
        } else {
          res = await this.$api.addCars(this.carInfo)
          console.log(res, '------------------- 添加车辆信息 ----------------')
        }

        if (res && res.status === 200) {
          this.$toast('预约成功！')
          setTimeout(() => {
            this.$router.push('/vehicleInfo')
          }, 1000)
        } else {
          // this.carInfo.carNum = this.carInfo.carNum.substring(1)
        }
      }
    },
    // 获取车辆数据字典
    async dataDir(params) {
      let res = await this.$api.dataDir(params)
      console.log(res, '------------------- 获取车辆数据字典 ----------------')

      if (res.status === 200 && res.data) {
        if (params.type === 'carColorType') {
          this.carColorArr = res.data.list
        }
        if (params.type === 'carDriverType') {
          this.carDriverArr = res.data.list
        }
        if (params.type === 'carFuelType') {
          this.carFuelArr = res.data.list
        }
        if (params.type === 'carAtType') {
          this.carAtTypeArr = res.data.list
        }
        if (params.type === 'carOutType') {
          this.carOutaArr = res.data.list.map(el => {
            el.text = el.value
            return el
          })
        }
      }
    },

    // 行驶证识别
    async readCarInfo(params, str) {
      let { data } = await this.fileAjax.post(
        '/carStation/api/cars/readCarInfo.do',
        params
      )
      console.log(data, '------------------ 行驶证识别 ----------------')
      let obj = data.data
      if (data.status == 200 && obj) {
        this.$toast.clear()
        if (str === 'front') {
          this.carInfo.carImgFront = obj.urlData
          this.carInfo.carPeople = obj.carInfo.carPeople
          this.carInfo.carType = obj.carInfo.carType
          this.carInfo.carIdNum = obj.carInfo.carIdNum
          this.carInfo.carDriveNum = obj.carInfo.carDriveNum

          this.carInfo.carNum = obj.carInfo.carNum.substring(1)
          this.carPlateText = obj.carInfo.carNum.substring(0, 1)

          this.carInfoDisabled.carNum = true

          console.log(this.carInfo.carNum, this.carPlateText)
        } else {
          console.log(obj.carInfo.carNum, this.carInfo.carNum)
          if (!obj.carInfo.carNum.includes(this.carInfo.carNum)) {
            this.$toast('副页信息识别不一致！')
            return
          }
          this.carInfo.carSize = obj.carInfo.carSize
          this.carInfo.carImgBack = obj.urlData
        }
        this.$toast('上传成功！')
      } else {
        this.$toast.clear()
        this.$toast(data.message)
      }

      // console.log(res, '------------------- 行驶证识别 ----------------')
    },
    // 发送短信验证码
    async sendVerifyCode() {
      if (!this.$refs.Countdown.countNum) {
        let res = await this.$api.sendVerifyCode({
          phone: this.carInfo.mobile
        })
        if (res.status === 200) {
          this.$refs.Countdown.countDown(true, 60)
        }
        console.log(res, '------------------- 发送短信验证码 ----------------')
      } else {
        this.$toast('不能重复发送验证码')
      }
    },
    // 上传备用项
    async getWxJsConfig(params, key) {
      let { data } = await this.fileAjax.post(
        '/carStation/app/common/sigleFileUpload.do',
        params
      )

      // this.signatureImg = image
      // this.signatureShow = false
      // this.carInfo.signature = blob
      console.log(data, '=-------data 上传备用项-------')

      if (data.data && data.data.urlData) {
        if (key === 'carAttachment1') {
          this.signatureShow = false
        }

        this.carInfo[key] = data.data.urlData
      }
      this.$toast.clear()
    },

    // 行驶证上传
    carPlateClick() {
      if (!this.carInfoDisabled.carNum) {
        this.carPlateDialog = true
      }
    },

    // 文件上传
    afterRead(file, str) {
      console.log(file)
      if (str === 'front') {
        this.readCarInfo(
          {
            type: str,
            file: file
          },
          str
        )
      }
      if (str === 'back') {
        this.readCarInfo(
          {
            type: str,
            file: file
          },
          str
        )
      }

      // 附件1
      if (str === 'carAttachment2') {
        this.getWxJsConfig(
          {
            file: file,
            path: 'signImg'
          },
          str
        )
      }
      // 附件2
      if (str === 'carAttachment3') {
        this.getWxJsConfig(
          {
            file: file,
            path: 'signImg'
          },
          str
        )
      }
    },

    // 服务协议 点击跳转页面
    vehicleClick() {
      this.$router.push({
        name: 'agreement',
        params: {
          carInfo: this.carInfo,
          editState: this.editState
        }
      })
    },

    // 排量确定
    onConfirm(value, index) {
      this.carInfo.carOut = value.value
      this.carOutShow = false
    },
    // 完成车牌输入 回调
    complete(presetNumber) {
      console.log(presetNumber, '完成车牌输入')
      this.carInfo.carNum = presetNumber.substring(1)
      this.carPlateText = presetNumber.substring(0, 1)
      this.carPlateDialog = false
    },
    // 手写板点击 生成图片
    async handleGenerate() {
      let res = await this.$refs.esign.generate()

      function base64ToBlob(dataurl, filename) {
        var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename + '.' + mime.split('/')[1], {
          type: mime
        })
      }

      console.log(base64ToBlob(res, '签名'))
      // console.log(res, file, '------生成图片-------')

      this.getWxJsConfig(
        {
          file: base64ToBlob(res, '签名'),
          path: 'signImg'
        },
        'carAttachment1'
      )
    },
    // 清除手写板
    handleReset() {
      this.$refs.esign.reset()
    },
    // 电子签名 手写板 初始化
    signatureClick() {
      this.signatureShow = true
      this.$nextTick(() => {
        this.canvasBox = document.getElementById('canvasBox')
        this.initCanvas()
      })
    },
    // 手写板 int
    initCanvas() {
      const canvas = document.querySelector('canvas')
      this.draw = new Draw(canvas, -this.degree)
    },
    // -------------------------------------提交验证---------------------------------
    validationFn() {
      // Object.keys(this.carInfo).forEach(key => {
      //   console.log(key, this.carInfo[key])
      // })

      let c = this.carInfo
      console.log(c, '----验证')
      let s = '信息不正确！'

      if (!this.editState) {
        this.carInfo.carNum = this.carPlateText + this.carInfo.carNum
      }

      if (!this.carInfo.userId || this.carInfo.userId === '') {
        this.carInfo.userId = JSON.parse(getLocal('userInfo')).id
      }

      if (!this.agreementChecked) {
        this.$toast('请阅读并同意《服务协议》')
        return true
      }
      if (!this.carInfo.carAttachment1) {
        this.$toast('请您签名，签名最终打印在申请表及委托单上')
      }

      if (c.carNum.length <= 1) {
        this.$toast('车牌' + s)
        return true
      }

      if (!c.carDriveNum || c.carDriveNum === '') {
        this.$toast('发动机号码' + s)
        return true
      }

      if (!c.carPeople || c.carPeople === '') {
        this.$toast('车辆所有人' + s)
        return true
      }

      if (!c.carIdNum || c.carIdNum === '') {
        this.$toast('车辆识别代号' + s)
        return true
      }

      if (!c.carType || c.carType === '') {
        this.$toast('车辆类型' + s)
        return true
      }

      if (!c.carSize || c.carSize === '') {
        this.$toast('外廓尺寸' + s)
        return true
      }

      if (!c.carFuel || c.carFuel === '') {
        this.$toast('燃油类型' + s)
        return true
      }

      if (!c.carImgFront || c.carImgFront === '') {
        this.$toast('请上传行驶证正面照片')
        return true
      }

      if (!c.carImgBack || c.carImgBack === '') {
        this.$toast('请上传行驶证反面照片')
        return true
      }

      if (!c.carAtType || c.carAtType === '') {
        this.$toast('变速箱类型' + s)
        return true
      }

      if (!c.carDriveType || c.carDriveType === '') {
        this.$toast('驱动形式' + s)
        return true
      }

      if (!c.carColor || c.carColor === '') {
        this.$toast('车身颜色' + s)
        return true
      }

      if (!c.carOut || c.carOut === '') {
        this.$toast('车辆排量' + s)
        return true
      }

      if (!c.mileage || c.mileage === '') {
        this.$toast('车辆里程' + s)
        return true
      }
    }
  },
  components: {
    agreement,
    vehicleKeyboard,
    Countdown,
    Draw,
    UpFile,
    drawingBoard
  }
}
</script>

<style lang="less" scoped>
#canvasBox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fff;
  canvas {
    width: 100%;
    height: 100%;
  }
  .botton-box {
    width: 6%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    i {
      position: absolute;
      left: 20%;
    }
    .van-icon-success {
      top: 3%;
      transform: rotate(-90deg);
    }
    .van-icon-delete {
      top: 45%;
      transform: rotate(-90deg);
    }
    .van-icon-cross {
      bottom: 3%;
    }
  }
}
.details-wrap {
  background-color: #f0f0f0;
  padding-bottom: 0.48rem;
  // 最小字体
  .small-font {
    font-size: 0.16rem;
    transform: scale(0.83, 0.83);
    -webkit-text-size-adjust: 100%;
  }
  .title {
    height: 1.12rem;
    background-color: #f0f0f0;
    div {
      margin: 0.333rem 0 0 0.2rem;
      span {
        width: 0.133rem;
        height: 0.533rem;
        background-color: #fff;
        display: inline-block;
      }
      span:nth-of-type(2) {
        background-color: #009a44;
      }
    }
    p {
      font-size: 0.587rem;
      color: #000;
      height: inherit;
      line-height: 1.22rem;
      text-indent: 0.227rem;
    }
  }
  /deep/ .van-uploader,
  /deep/ .van-uploader .van-uploader__wrapper,
  /deep/ .van-uploader .van-uploader__input-wrapper {
    width: 100%;
  }
  // 客户信息
  .customer-info {
    .van-cell {
      border-bottom: 1px solid #bbb;
    }

    .content {
      .van-cell {
        height: 1.147rem;
        line-height: 1.147rem;
        padding: 0 16px;
        /deep/ .van-field__control {
          height: 1.147rem;
          line-height: 1.147rem;
        }
        /deep/ .van-cell__title {
          span {
            font-size: 0.48rem;
          }
        }
      }
      // 号牌号码
      .card-cell {
        /deep/ .van-cell__title {
          width: 78%;
        }
        .card {
          min-width: 32px;
          height: 0.827rem;
          margin-top: 0.16rem;
          span {
            height: 0.827rem;
            line-height: 0.827rem;
            position: absolute;
            vertical-align: middle;
            font-size: 14px;
            left: 0;
            top: 0;
            min-width: auto;
          }
          i {
            min-width: auto;
            height: 0.827rem;
            position: absolute;
            right: 0.16rem;
            top: 0;
            transform: rotate(90deg);
          }
        }
      }
      // 验证码
      .card-cell-validation {
        /deep/ .van-cell__title {
          width: 41%;
        }
        .validation {
          height: 0.667rem;
          line-height: 0.667rem;
          vertical-align: middle;
          padding: 0 4px;
          min-width: auto;
          border-radius: 0.107rem;
          border: 0;
          margin-top: -0.053rem;
          /deep/ .times {
            // .small-font;
            font-size: 0.32rem;
          }
        }
      }
    }
  }
  // 驾驶证信息
  .drivers-license {
    padding-bottom: 0.32rem;

    div.uploader {
      width: 6.267rem;
      height: 4.053rem;
      margin: 0.187rem auto 0;
      border-radius: 0.16rem;
      border: 0.027rem dashed #949494;
      .box {
        width: 6rem;
        height: 3.76rem;
        margin: 0.133rem;
        position: relative;
        background: url('../../assets/img/vehicle-bg.png') no-repeat;
        background-size: cover;
        .text {
          display: table-cell;
          height: inherit;
          vertical-align: middle;
          img {
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
          }
        }
        .icon {
          width: 100%;
          height: inherit;
          position: absolute;
          top: 0;
          left: 0;
          .bg {
            width: 1.493rem;
            height: 1.493rem;
            border-radius: 50%;
            background: url('../../assets/img/icon/camera.png') center center
              no-repeat #ea4d18;
            background-size: 60%;
            margin: 0.56rem auto 0;
          }
        }
        .bottom {
          width: 100%;
          height: 1.693rem;
          position: absolute;
          bottom: 0;
          left: 0;
          span {
            display: block;
            text-align: center;
            font-size: 0.307rem;
          }
          span:nth-of-type(1) {
            font-size: 0.4rem;
            font-weight: 500;
            margin: 0.24rem 0 0.267rem;
          }
        }
      }
    }
  }
  // 车辆信息
  .customer-info {
    .content {
      .special {
        padding: 0.187rem 0.333rem;
        border-bottom: 1px solid #cacaca;
        .t-name {
          font-size: 0.493rem;
          line-height: 0.72rem;
          margin-bottom: 0.24rem;
        }
      }
      .color {
        .van-radio {
          margin-right: 1.067rem;
          margin-bottom: 0.133rem;
        }
        .van-radio:nth-of-type(5n + 0) {
          margin-right: 0;
        }
      }
      .drive-form {
        .van-radio {
          margin-right: 2.333rem;
          margin-bottom: 0.133rem;
        }
        .van-radio:nth-of-type(3n + 0) {
          margin-right: 0;
        }
      }
      .fuel {
        .van-radio {
          margin-right: 1.067rem;
          margin-bottom: 0.133rem;
        }
        .van-radio:nth-of-type(4n + 0) {
          margin-right: 0;
        }
      }
      // .items {
      //   height: 1.027rem;
      //   line-height: 1.027rem;
      //   font-size: 0.493rem;
      //   border-bottom: 1px solid #cacaca;
      // }
    }
  }
  // 电子签名
  .signature-info {
    .content {
      padding: 0.24rem 0 0.267rem;
      .uploader {
        width: 6.32rem;
        height: 4.08rem;
        margin: 0.187rem auto 0;
        border-radius: 0.16rem;
        border: 2px dashed #a7a7a7;
        position: relative;
        .bg,
        .text {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }
        .bg {
          opacity: 0.1;
          img {
            width: 5.333rem;
            height: 3.68rem;
            margin: 0.16rem auto 0;
            display: block;
          }
        }
        .text {
          z-index: 1;
          p {
            font-size: 1.093rem;
            text-align: center;
            color: #757172;
            margin: 0.893rem 0 0.72rem;
          }
          p:nth-of-type(2) {
            font-size: 0.48rem;
            color: #747072;
            margin: 0;
          }
          img {
            width: 100%;
            height: inherit;
            // transform: rotate(90deg);
          }
        }
      }
    }
  }
  // 备用项
  .standby-info {
    .van-icon {
      margin-left: 0.267rem;
    }
    .box-enter-active,
    .box-leave-active {
      transition: all 0.4s;
    }
    .box-enter,
    .box-leave-active {
      transform: translate3d(0, 0.2rem, 0);
      opacity: 0;
    }
    .content {
      padding: 0.373rem 0.533rem 0;
      .fl,
      .fr {
        .box {
          width: 3.4rem;
          height: 3.4rem;
          border: 2px dashed #a7a7a7;
          padding: 0.253rem;
          margin: 0 auto;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
          span {
            width: 2.773rem;
            height: 2.773rem;
            border: 0.093rem solid #a7a7a7;
            font-size: 2.613rem;
            line-height: 80%;
            text-align: center;
            font-weight: 100;
            color: #a7a7a7;
            display: block;
          }
        }
        p {
          font-size: 0.48rem;
          text-align: center;
          line-height: 1.213rem;
        }
      }
      /deep/ .van-field__label {
        width: 120px;
      }
    }
  }
  // 服务协议
  .agreement-info {
    margin: 0.267rem 0 0 0.253rem;
    span {
      font-size: 0.48rem;
    }
    .color {
      color: #f60b16;
    }
  }

  .btn-submit {
    width: 95%;
    font-size: 0.64rem;
    letter-spacing: 1.093rem;
    border-radius: 0.16rem;
    margin: 20% auto 0;
    span {
      margin-left: 15%;
    }
  }
}
</style>
